import React, { PureComponent, Fragment } from 'react';
import { FormattedMessage, formatMessage } from 'umi/locale';
import {
    Row,
    Col,
    Form,
    Input,
    DatePicker,
    Badge,
    Divider,
    Upload,
    Icon,
    Tooltip
} from 'antd';
import { connect } from 'dva';
import { usePlatform } from '@/defaultSettings.js';
const formItemLayout = {
    labelCol: { span: 5 },
    wrapperCol: { span: 18 },
};
import {Select,Button , Table ,Modal,Pagination} from '@/components/CustomAntd'
const { Option } = Select;
const FormItem = Form.Item;
@connect(({ permission_management, loading }) => ({
  permission_management,
  loading: loading.models.permission_management,
}))
@Form.create()
export default class CustomModal extends PureComponent {

  validator(rule,valuse){
    const { form } = this.props;
    const is_left_menu = form.getFieldValue("is_left_menu");
    // const route = form.getFieldValue("route");
    const pattern = new RegExp("[/]");
    if (is_left_menu && is_left_menu == 1){
      if (valuse && pattern.test(valuse)){
        return true
      } else {
        return false
      }
      return false
    } else if (is_left_menu && is_left_menu == 2){
      // console.log(/^\//.test(valuse))
        if (valuse && /^\//.test(valuse)){
            return true
        } else {
          return false
        }
        return false
    }
  };
  selectMenu(){
    const { form } = this.props;
    form.resetFields("route");
  }
    render() {
        const{
            visible,
            updateData,
            modalType,
            modalHandleCancel,
            modalHandleOk,
            typesList,
            platformtnameList,
            selectId
        } = this.props;
      const deptsArray = updateData && updateData.platform_type ? updateData.platform_type.split(",") :undefined;
      const { permission_management: { treeList,treeAll } } = this.props;
      const id = this.props.updateData.permission_id;
      const platformType = deptsArray ? deptsArray.slice(0,-1):undefined
      const { form: { getFieldDecorator, getFieldValue, getFieldsValue, setFieldsValue, resetFields }, loading, } = this.props;
      const { form, dispatch, } = this.props;
      const is_left_menu = form.getFieldValue("is_left_menu");
        //确认
        const onOk = e => {
            e.preventDefault();
            let subFields
            if (modalType === 'edit') {
                subFields = {
                    permission_id: updateData.permission_id,

                }
            }

            form.validateFields((err, fieldsValue) => {
                if (err) return;
                if (modalType === 'edit'){
                  fieldsValue.permission_pid = fieldsValue.menu_id ? fieldsValue.menu_id : '';
                }
                if(fieldsValue.platform_type != undefined){
                    let list = '';

                    for (var i = 0; i < fieldsValue.platform_type.length; i++) {
                        list += fieldsValue.platform_type[i] + ',';
                    }
                    subFields = {
                        ...subFields,
                        ...fieldsValue,
                        modalType: modalType,
                        platform_type: list
                    };
                }else{
                    subFields = {
                        ...subFields,
                        ...fieldsValue,
                        modalType: modalType,

                    };
                }
                //console.log(subFields);
                modalHandleOk(subFields, e);

            });
        }

        return (
            <Modal
                title={modalType === 'brother' || modalType === 'children' ||  modalType === 'father' ? '新增菜单信息' :
                    modalType === 'edit' ? '修改菜单信息' : ''}
                width={800}
                visible={visible}
                onCancel={modalHandleCancel}
                onOk={onOk}
            >

                <div>
                  {
                    modalType == 'edit' ?
                      <FormItem
                        {...formItemLayout}
                        label={formatMessage({ id: 'iot.permission.columns.permission_id' })}
                        required={true}
                      >
                        {getFieldDecorator('permission_id', {
                          initialValue: this.props.updateData.permission_id,
                          validateTrigger: ['onChange', 'onBlur'],
                        })(
                          <Input disabled="disabled" style={{ width: '445px' }} placeholder="请输入" />
                        )}
                      </FormItem>
                      :
                      <FormItem
                        {...formItemLayout}
                        label={formatMessage({ id: 'iot.permission.columns.permission_id' })}
                        required={true}
                      >
                        {getFieldDecorator('permission_id', {
                          initialValue: modalType == 'edit' ? this.props.updateData.permission_id : undefined,
                          validateTrigger: ['onChange', 'onBlur'],
                          rules: [
                            {
                              pattern: /^[^ ]+$/,
                              max: 32,
                              required: true,
                              whitespace: true,
                              message: '请输入32位以内功能id(不能包含空格)',
                            },
                            {
                              pattern: /^[0-9a-zA-Z_\\-]{1,}$/,
                              message: '禁止输入中文',
                            },
                          ],
                        })(
                          <Input style={{ width: '445px' }} placeholder="请输入" />
                        )}
                      </FormItem>
                  }
                  {
                    modalType == 'edit' && treeAll && !treeAll.permissions ?
                      <FormItem
                        {...formItemLayout}
                        label={formatMessage({ id: 'iot.permission.columns.menu' })}
                      >
                        {getFieldDecorator('menu_id', {
                          validateTrigger: ['onChange', 'onBlur'],
                          initialValue: modalType == 'edit' &&  this.props.updateData.permission_pid ?
                                          this.props.updateData.permission_pid : undefined,
                          rules: [
                            // {
                            //   pattern: /^[^ ]+$/,
                            //   max: 32,
                            //   required: true,
                            //   whitespace: true,
                            //   message: '请填写功能id',
                            // },
                          ],
                        })(

                            <Select allowClear={true} placeholder="请选择" style={{ width: '445px' }} >
                              {treeList && treeList.length>0 ?
                                treeList.map(function (item) {
                                  return <Option key= {item.permission_id} id={item.permission_id}
                                                 value={item.permission_id} disabled={id === item.permission_id}
                                  >{item.permission_name}
                                  </Option>;
                                }) : []
                              }
                            </Select>
                        )}
                      </FormItem>
                      : []
                  }
                  <FormItem
                    {...formItemLayout}
                    label={formatMessage({ id: 'iot.permission.columns.icon' })}
                  >
                    {getFieldDecorator('icon', {
                      initialValue: modalType == 'edit' ? this.props.updateData.icon : undefined,
                      validateTrigger: ['onChange', 'onBlur'],
                      rules: [
                        {
                          pattern: /^[^ ]+$/,
                          max: 64,
                          whitespace: true,
                          message: '请输入图标code(不能包含空格)',
                        },
                        {
						    pattern: /^[0-9a-zA-Z_\\-]{1,}$/,

						    whitespace: true,
						    message: '禁止输入中文',
						},
                      ],
                    })(
                      <Input style={{ width: '445px' }} placeholder="请输入" />
                    )}
                  </FormItem>

                    <FormItem
                        {...formItemLayout}
                        label={formatMessage({ id: 'iot.permission.columns.permission_name' })}
                        required={true}
                    >
                        {getFieldDecorator('permission_name', {
                            initialValue: modalType == 'edit' ? this.props.updateData.permission_name : undefined,
                            validateTrigger: ['onChange', 'onBlur'],
                            rules: [
                                {
                                    pattern: /^[^ ]+$/,
                                    max: 32,
                                    required: true,
                                    whitespace: true,
                                    message: '请输入32位以内' + formatMessage({ id: 'iot.permission.columns.permission_name' })+ '(不能包含空格)',
                                },

                            ],
                        })(
                            <Input style={{ width: '445px' }} placeholder="请输入" />
                        )}
                    </FormItem>
                    <FormItem
                      {...formItemLayout}
                      label={formatMessage({ id: 'iot.permission.columns.is_left_menu' })}
                      required={true}
                    >
                      {getFieldDecorator('is_left_menu', {
                        initialValue: modalType == 'edit' ? this.props.updateData.is_left_menu : undefined,
                        validateTrigger: ['onChange', 'onBlur'],
                        rules: [
                          {
                            required: true,
                            message: '请选择' + formatMessage({ id: 'iot.permission.columns.is_left_menu' }),
                          },

                        ],
                      })(
                        <Select placeholder="请选择" style={{ width: '445px' }} onChange={() => this.selectMenu()} >
                          {typesList && typesList.length > 0 ?
                            typesList.map(function (item) {
                              return <Option key={item.k} id={item.k}
                                             value={item.k}>{item.v}
                              </Option>;
                            }) : []
                          }
                        </Select>
                      )}

                    </FormItem>
                  {
                    is_left_menu ?
                      <FormItem
                        {...formItemLayout}
                        label={formatMessage({ id: 'iot.permission.columns.route' })}
                        required={true}
                      >
                        {getFieldDecorator('route', {
                          initialValue: modalType == 'edit' ? this.props.updateData.route : undefined,
                          validateTrigger: ['onChange', 'onBlur'],
                          rules: [
                            {
                              validator:(rule,valuse,callback)=>{
                                const message = this.validator(rule,valuse)
                                if(message){
                                  if (is_left_menu == 1){
                                    callback("功能类型为左菜单时，路径不能含/")
                                  } else if (is_left_menu == 2){
                                    callback("功能类型为隐藏左菜单时，不能以/开头")
                                  }
                                }else {
                                  callback()
                                }
                              }
                            },
                            {
                              max: 255,
                              required: true,
                              whitespace: true,
                              message: '请填写255位以下' + formatMessage({ id: 'iot.permission.columns.route' }),
                            },
                            {
                              pattern: /^[^ ]+$/,
                              message: '(不能包含空格)',
                            },
                          ],
                        })(
                          <Input style={{ width: '445px' }} placeholder="请输入" />
                        )}
                      </FormItem>
                      :
                      <FormItem
                        {...formItemLayout}
                        label={formatMessage({ id: 'iot.permission.columns.route' })}
                        required={true}
                      >
                        {getFieldDecorator('route', {
                          initialValue: modalType == 'edit' ? this.props.updateData.route : undefined,
                          validateTrigger: ['onChange', 'onBlur'],
                          rules: [
                            {
                              max: 150,
                              required: true,
                              whitespace: true,
                              message: '请填写' + formatMessage({ id: 'iot.permission.columns.route' })+'不能大于150位',
                            },
                            {
                              pattern: /^[^ ]+$/,
                              required: true,
                              whitespace: true,
                              message: '(不能包含空格)',
                            },
                          ],
                        })(
                          <Input style={{ width: '445px' }} disabled={true} placeholder="请输入" />
                        )}
                      </FormItem>

                  }

                    <FormItem
                        {...formItemLayout}
                        label={formatMessage({ id: 'iot.permission.columns.seq' })}
						            required={true}
                    >
                        {getFieldDecorator('seq', {
                            initialValue: modalType == 'edit' ? this.props.updateData.seq : undefined,
                            validateTrigger: ['onChange', 'onBlur'],
                            rules:[
                              {
                                required: true,
                                pattern:/^[1-9]\d*$/,
                                message: '请填写11位以内数字的' + formatMessage({ id: 'iot.permission.columns.seq' }),
                              },
                            ],
                            normalize: (value)=>{
                              if(/^\d+$/.test(value)){
                                return parseInt(value)
                              }else{
                                return value
                              }
                            },

                        })(
                            <Input style={{ width: '445px' }} placeholder="请输入" />
                        )}

                    </FormItem>.
                    {
                        usePlatform?
                            <FormItem
                                {...formItemLayout}
                                label={formatMessage({ id: 'iot.permission.columns.platform_type' })}

                            >
                                {getFieldDecorator('platform_type', {
                                    initialValue: modalType == 'edit' ? platformType : undefined,
                                    validateTrigger: ['onChange', 'onBlur'],

                                })(
                                    <Select mode="multiple" placeholder="请选择" style={{ width: 200, marginTop: 4, marginLeft: 5, }} >
                                        {platformtnameList && platformtnameList.length > 0 ?
                                            platformtnameList.map(function (item) {
                                                return <Option key={item.k} id={item.k}
                                                               value={item.k}>{item.v}
                                                </Option>;
                                            }) : []
                                        }

                                    </Select>
                                )}

                            </FormItem>
                            :
                            []
                    }

                </div>


            </Modal>
        );
    }
}
